<template>
    <div class="big_box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>物资管理</el-breadcrumb-item>
            <el-breadcrumb-item>产品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>

        <el-form :model="selectfrom" ref="_selectfrom">
            <el-row :gutter="5">
                <el-col :span="3">
                    <el-input placeholder="物品名称" v-model="selectfrom.UserName"></el-input>
                </el-col>
                <el-col :span="3">
                    <el-date-picker style="width: 100%" placeholder="开始时间"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    v-model="selectfrom.Start"></el-date-picker>
                </el-col>
                <el-col :span="3">
                    <el-date-picker style="width: 100%" placeholder="结束时间"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    v-model="selectfrom.End"></el-date-picker>
                </el-col>
                <el-col :span="2">
                    <el-button  icon="el-icon-search" @click="formdata"></el-button>
                </el-col>
            </el-row>
        </el-form>

        <el-row style="padding: 10px 0px">
            <el-col>
                <el-button-group>
                    <el-button class="buttongroup" type="danger" icon="el-icon-delete" @click="BatchDelete_event">批量删除</el-button>
                    <el-button class="buttongroup"  type="success" icon="el-icon-circle-plus-outline" @click="AddIntangibleAssets_dialog=true">新增</el-button>
                </el-button-group>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" border stripe style="width: 100%"  @selection-change="SelectionChange_event">
                    <el-table-column type="selection" width="40" align="center"></el-table-column>
                    <el-table-column fixed type="index" label="序号" width="50" align="center" :index="indexMethod"></el-table-column>
                    <el-table-column fixed prop="ApplicationNumber" show-overflow-tooltip label="申请号" align="center" width="120"></el-table-column>
                    <el-table-column prop="FilingDate" align="center" show-overflow-tooltip label="申请日">
                        <template slot-scope="slot">
                            {{ PurchaseDate_conversion(slot.row.FilingDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="Applicant" align="center" show-overflow-tooltip label="申请人" width="120"></el-table-column>
                    <el-table-column prop="Inventor" align="center" show-overflow-tooltip label="发明人" ></el-table-column>
                    <el-table-column prop="PatentType" align="center" show-overflow-tooltip label="专利类型" width="120">
                        <template slot-scope="slot">
                            {{ GetPatentTypeName(slot.row.PatentType) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="PatentName" align="center" show-overflow-tooltip label="专利名称" width="120"></el-table-column>
                    <el-table-column prop="state" align="center" show-overflow-tooltip label="状态">
                        <template slot-scope="slot">
                            {{ GetStateName(slot.row.state) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="AuthorizedAnnouncementDate" show-overflow-tooltip align="center" label="授权公告日" width="100">
                        <template slot-scope="slot">
                            {{ PurchaseDate_conversion(slot.row.AuthorizedAnnouncementDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="AssetsTypeId" label="图片" show-overflow-tooltip align="center" width="100"></el-table-column>
                    <el-table-column prop="Remark" label="备注" show-overflow-tooltip align="center" width="100"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="145" align="center">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" plain  type="primary" size="mini">编辑</el-button>
                            <el-button type="danger" size="mini"       plain  @click="BatchDeleteOne_event(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="block">
                    <el-pagination
                            @size-change="formdata"
                            @current-change="formdata"
                            :current-page.sync="pagination.currentPage"
                            :page-sizes="pagination.pagesizes"
                            :page-size.sync="pagination.pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total.sync="pagination.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

        <el-dialog :visible.sync="AddIntangibleAssets_dialog" width="80%" title="新建产品" @close="AddIntangibleAssets_close">
            <AddIntangibleAssets ref="AddIntangibleAssets_ref"></AddIntangibleAssets>
        </el-dialog>

        <el-dialog :visible.sync="UpdataIntangibleAssets_dialog" width="80%" title="产品信息" @close="UpdataIntangibleAssets_close">
            <UpdataIntangibleAssets ref="UpdataIntangibleAssets_ref" :intangible-assets-model="IntangibleAssets_details"></UpdataIntangibleAssets>
        </el-dialog>

    </div>
</template>

<script>
    import { Switch } from "element-ui";
import AddIntangibleAssets from "./AddIntangibleAssets";
    import UpdataIntangibleAssets from "./UpdataIntangibleAssets";

    export default {
        name: "IntangibleAssets",
        components: {
            'AddIntangibleAssets': AddIntangibleAssets,
            'UpdataIntangibleAssets': UpdataIntangibleAssets
        },
        data() {
            return {
                //表格数据
                tableData: [],
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 100
                },
                //表格选中的数据
                SelectMore_lis: [],
                //表格查询数据
                selectfrom: {
                    UserName: '',
                    Start: '',
                    End: '',
                },
                // 单个数据详情(用于编辑)
                IntangibleAssets_details: {},
                //添加表格的显示
                AddIntangibleAssets_dialog: false,
                //编辑表格的显示
                UpdataIntangibleAssets_dialog: false,
            }
        },
        created() {
            this.formdata()
        },
        methods: {
            //初始化表格数据加载
            formdata() {
                this.$http.post('IntangibleAssets/GetTableDb', {
                    currentPage: this.pagination.currentPage,
                    pagesize: this.pagination.pagesize,
                    UserName: this.selectfrom.UserName,
                    StartDate: this.selectfrom.Start,
                    EndDate: this.selectfrom.End,
                }).then(res => {
                    this.pagination.total = res.data.count
                    this.tableData = res.data.data
                    console.log(this.tableData)
                }).catch(() => {
                    this.$message.error('服务器异常,请联系管理员!')
                })
            },
            //序列号
            indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            //表格数据选择事件
            SelectionChange_event(value) {
                this.SelectMore_lis = value
            },
            //批量删除
            BatchDelete_event() {
                this.$confirm('你确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    let ids = []
                    if (this.SelectMore_lis.length > 0) {
                        this.SelectMore_lis.forEach(item => {
                            ids.push(item.Id)
                        })
                        let loadding = this.openLoading();
                        this.$http.post('IntangibleAssets/DelIntangibleAssetsDB', ids).then(res => {
                            loadding.close();
                            if (res) {
                                this.$message.success('删除成功!')
                                this.SelectMore_lis = []
                                this.formdata()
                            } else {
                                this.$message.success('删除失败,请重试!')
                            }
                        }).catch(() => {
                            this.$message.info('服务器异常,请联系管理员!')
                        })
                    } else {
                        this.$message.warning('没有选中的数据!')
                    }
                }).catch(() => {
                    this.$message.info('已取消!')
                })
            },
            //单个数据删除
            BatchDeleteOne_event(obj) {
                this.SelectMore_lis.push(obj)
                this.BatchDelete_event()
            },
            //编辑
            handleClick(obj) {
                this.IntangibleAssets_details = obj
                this.UpdataIntangibleAssets_dialog = true
            },
            //创建时间转化
            PurchaseDate_conversion(val) {
                let time = (val.split(' '))[0]
                if (time == '0100-01-01') {
                    return ' '
                } else {
                    return time
                }       
            },
            //添加表格的关闭
            AddIntangibleAssets_close() {
                this.$refs['AddIntangibleAssets_ref'].formresetFields_event()
            },
            //编辑表格的关闭
            UpdataIntangibleAssets_close() {
                this.$refs['UpdataIntangibleAssets_ref'].formresetFields_event()
            },
            //专利类型转换
            GetPatentTypeName(value) {
                let name=""
                switch (value) {
                    case 1:
                        name = "软件著作" 
                        break;
                    case 2:
                        name = "发明专利"
                        break;
                    case 4:
                        name = "实用新型专利"
                        break;
                    case 8:
                        name = "商标"
                        break;
                    case 16:
                        name = "其它"
                        break;
                }
                return name
            },
            //专利状态转换
            GetStateName(value) {
                let name = ""
                switch (value) {
                    case 1:
                        name = "受理阶段"
                        break;
                    case 2:
                        name = "申请阶段"
                        break;
                    case 4:
                        name = "初审阶段"
                        break;
                    case 8:
                        name = "实审阶段"
                        break;
                    case 16:
                        name = "取证阶段"
                        break;
                    case 32:
                        name = "其它"
                        break;
                }
                return name
            }
        }
    }
</script>

<style scoped>

</style>
